<template>
    <div style="margin-top: 10px;">
        <div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1000;"
             :style="{display:showStruct?'block':'none'}">
            <div style="position: relative;width: 100%;height: 100%;">
                <div style="outline:none;position: fixed;top: 80px;height: calc(100% - 80px);left: 210px;width: calc(100% - 210px);background-color: #000;opacity:0.5;z-index: 999;"
                     @click="showStruct = false"></div>
                <div style="left: 50%;position: absolute;background: white;margin-left: -228px;margin-top: 100px;z-index: 1000">
                    <div style="background: white;position: fixed;border: 1px solid rgb(243, 243, 243);width: 456px;">
                        <textarea
                                style=" border:0;background-color:transparent;height: 210px;width: 100%;resize: none;outline: none;"
                                v-model="type.struct" ref="struct" placeholder="消息结构定义"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1000;"
             :style="{display:showVariable?'block':'none'}">
            <div style="position: relative;width: 100%;height: 100%;">
                <div style="outline:none;position: fixed;top: 80px;height: calc(100% - 80px);left: 210px;width: calc(100% - 210px);background-color: #000;opacity:0.5;z-index: 999;"
                     @click="showVariable = false"></div>
                <div style="left: 50%;position: absolute;background: white;margin-left: -228px;margin-top: 100px;z-index: 1000">
                    <div style="background: white;position: fixed;border: 1px solid rgb(243, 243, 243);width: 456px;">
                        <template v-if="type.struct&&type.struct.length>0">
                            <template v-for="(type,key) in JSON.parse(type.struct)">
                                <div @click="insertVariable('{{'+key+'}}')"
                                     style="padding: 4px;border-top: 1px solid #f3f3f3">
                                    <span style="font-weight: 900;font-size: 14px;">{{key}}</span> |
                                    <span style="font-size: 12px;">{{type}}</span>
                                </div>

                            </template>
                        </template>
                    </div>
                </div>
            </div>
        </div>
        <div>

            <div style="color: #333;background: rgb(247, 247, 247);padding: 6px;border-bottom: 1px solid #f1f1f1;">
                <input v-model="type.name" style="width: 100%;" placeholder="请输入模板名称" @blur="update">
                <div style="font-size: 12px;margin-left: 8px;color: #929292;">消息编号：{{type.code}}</div>
            </div>
            <div style="background: #f7f7f7;padding: 6px;">

                <a href="javascript:void(0)" @click="showStruct=true">数据结构</a> |
                <a @click="showVariable=true">插入变量</a> |
                <a @click="deleteMessageType">删除</a> |

            </div>
            <div style="display: flex;">
                <div style="width: 300px;border:1px solid #f3f3f3; ">

                    <div class="message mine">
                        <div class="text">
                            <div v-html="type.view" style="width: 184px;"></div>
                        </div>
                        <img src="/imgs/default.png" style="    width: 40px;height: 40px;margin: 0 12px;"></div>
                </div>
                <div style="border: 1px solid #f3f3f3;width: calc(100% - 300px);">
                    <textarea v-model="type.view" placeholder="消息样式" ref="css"></textarea>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    input {
        border: none;
        outline: none;
        font-size: 18px;
        background-color: transparent;
        padding: 8px 8px 0 8px;
    }
</style>
<script>
    export default{
        props: ["type"],
        data(){
            return {
                showVariable: false,
                showStruct: false,
                editor: null,
            }
        }, directives: {
            focus: {
                inserted: function (el) {
                    el.focus()
                }
            }
        },
        methods: {
            update: function () {
                Pace.start()
                $.post('/message/type/update', {
                    name: this.type.name,
                    struct: this.type.struct,
                    view: this.type.view,
                    id: this.type.id
                }, function (result) {
                    Pace.stop()
                });
            },
            deleteMessageType:function () {
                const that = this;
                dialog('<div style="">' +
                    '<div style="text-align: center;font-weight: 900;font-size: 14px;"><span style="font-size: 16px;">警告！</span>删除后已有的消息将无法正常显示！</div>' +
                    '<div style="display: flex;margin-top: 16px;justify-content: center;">' +
                    '<button class="btn btn-info" click-bind="cancel" style="margin: 0 8px 0 0;">取消</button>' +
                    '<button class="btn btn-danger" click-bind="confirm" style="margin: 0 8px;">确认</button>' +
                    '</div>' +
                    '</div>', {
                    cancel: function (evt) {
                        evt.data.remove(300);
                    },
                    confirm: function (evt) {
                        evt.data.remove(300);
                        $.post('/message/type/delete',{id:that.type.id},function (result) {
                            that.$emit('deleteEditor');
                        })
                    }
                });
            },
            insertVariable: function (key) {
                this.showVariable = false;
                this.editor.replaceSelection(key);
            }
        },
        mounted: function () {
            this.editor = CodeMirror.fromTextArea(this.$refs.css, {
                mode: "text/html"

                , lineNumbers: true
            });
            const that = this;
            this.editor.on("change", function (editor, changes) {
                that.type.view = editor.getValue()

            });
            this.editor.on("blur", function () {
                that.update();
            });

        }
    }

</script>